<template>
  <div class="lg-container" v-wechat-title="appTitle">
    <div v-if="isLoading" class="load-container">
      <i class="lg-icon-loading lg-mescroll-rotate"></i>
      <span>加载中 ...</span>
    </div>
    <template v-else>
      <h5 class="lg-title">{{title}}</h5>
      <fm-generate-form
        v-if="widgetForm.list.length > 0 && type === 1"
        ref="generateForm"
        insite="true"
        :data="widgetForm"
        :value="widgetModels"
        :remote="remoteFuncs"
      />
      <div v-else-if="content !== '' && type === 2" v-html="content" />
      <div v-if="lgnullFlag" id="lgNullData">暂无数据，请告知医生</div>
    </template>
  </div>
</template>
<script>
import { read } from '@/api/common'
export default {
  data () {
    return {
      apiUri1: 'AppFollowupSolutionNodeItem',
      apiUri2: 'AppPlanNodeItem',
      content: '',
      title: '',
      appTitle: '加载中...',
      widgetForm: {
        list: [],
        config: {
          labelWidth: 100,
          labelPosition: 'right',
          size: 'small'
        }
      },
      isLoading: true,
      lgnullFlag: false,
      type: 0,
      name: '',
      widgetModels: {},
      remoteFuncs: {},
      isPlan: 0
    }
  },
  created () {
    const rem = document.documentElement.clientWidth / 750 * 20
    document.documentElement.style.fontSize = rem + 'px'
  },
  mounted () {
    this.isPlan = parseInt(this.$route.query.isPlan)
    console.log(this.isPlan)
    if (this.isPlan === 0) {
      this.getSolution()
    } else {
      this.getPlan()
    }
  },
  watch: {
    appTitle (val) {
      console.log(val)
    }
  },
  methods: {
    getPlan () {
      read(this.apiUri2, parseInt(this.$route.query.id)).then(res => {
        console.log(res)
        if (res.code === 200) {
          setTimeout(() => {
            this.isLoading = false
          }, 500)
          if (res.info) {
            this.title = res.info.name
            this.type = res.info.type
            if (this.type === 1) {
              this.appTitle = '量表详情'
              if (res.info.content) {
                this.widgetForm = JSON.parse(res.info.content)
                this.widgetForm.list.map(v => {
                  v.options.disabled = true
                })
              } else {
                this.lgnullFlag = true
              }
            } else {
              this.appTitle = '宣教详情'
              if (res.info.content) {
                this.content = res.info.content
              } else {
                this.lgnullFlag = true
              }
            }
            if (res.info.answer) {
              this.widgetModels = JSON.parse(res.info.answer)
            }
          }
        }
      })
    },
    getSolution () {
      read(this.apiUri1, parseInt(this.$route.query.id)).then(res => {
        if (res.code === 200) {
          setTimeout(() => {
            this.isLoading = false
          }, 500)
          if (res.info) {
            this.title = res.info.name
            this.type = parseInt(res.info.templateType)
            if (this.type === 1) {
              this.appTitle = '量表详情'
              if (res.info.content) {
                this.widgetForm = JSON.parse(res.info.content)
                this.widgetForm.list.map(v => {
                  v.options.disabled = true
                })
              }
            } else {
              this.appTitle = '宣教详情'
              this.content = res.info.content
            }
          }
        }
      })
    }
  }
}
</script>
<style lang="scss">
  .el-radio, .el-checkbox, .el-input {
    white-space: normal;
  }
  h1,h2,h3,h4,h5,h6 {
    font-size: 1.3rem !important;
  }
</style>
<style lang="scss" scoped>
.lg-title {
  font-size: 1.5rem !important;
  color: #111111;
  text-align: center;
  line-height: 26px;
  margin: 0 0 20px;
  padding: 0 30px;
}
// 空数据
#lgNullData {
  display: inline-block;
  width: 100%;
  color: #666666;
  font-size: 14px;
}
.lg-container {
  padding: 20px;
  background-color: #fff;
  width: 100%;
  overflow: auto;
  min-height: 100vh;
  div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
    font-size: 1.3rem !important;
  }
  .load-container {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    .lg-icon-loading {
      display: inline-block;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1px solid gray;
      border-bottom-color: transparent;
      vertical-align: middle;
    }
    .lg-mescroll-rotate {
      -webkit-animation: mescrollRotate 0.6s linear infinite;
      animation: mescrollRotate 0.6s linear infinite;
    }
    span {
      color: gray;
      font-size: 14px;
      margin-left: 5px;
    }
  }
}
@-webkit-keyframes mescrollRotate {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes mescrollRotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>
